<template>
    <div class="mainConBox">
        <!-- 头部 -->
        <div class="header">
            <van-nav-bar title="分享活动" right-text="我的记录" left-arrow @click-left="back" @click-right="toHisory" />
        </div>
        <div class="content">
            <!-- 上部分 -->
            <div class="doing">
                <!-- 背景图 -->
                <img class="top-bg" src="../../assets/activity_year/background.jpg" alt="">
                <!-- 幸运大转盘 -->
                <img class="top-title" src="../../assets/activity_year/doing-title.png" alt="">
                <!-- 你还有一次机会了啊 -->
                <div class="top-text">你有{{ priceNumd <= 0 ? '0' : priceNumd }}次抽奖机会 </div>
                        <!-- 大转盘 -->
                        <div class="round">
                            <!-- 立即抽奖图片 -->
                            <div class="turnplate_box">
                                <canvas class="item" id="myCanvas" width="240px" height="240px"></canvas>
                            </div>
                            <img class="goto" id="start" @click="start()" src="../../assets/activity_year/goto.png">
                        </div>

                        <!-- 活动说明 -->
                        <div class="active" v-if="goldenUserDetails.length != 0">
                            <div class="active-title">中奖记录</div>
                            <div class="border">
                                <div class="row-new" v-for="(item, index) in goldenUserDetails" :key="index">
                                    <div v-if="item.shareDate != undefined">{{ item.shareDate.split(' ')[0] }}</div>
                                    <div v-else>刚刚</div>
                                    <div>{{ item.userName | names }}</div>
                                    <div>获得了{{ item.shareMoney }}元</div>
                                </div>
                            </div>
                        </div>
                        <!-- 抽奖弹窗 -->
                        <van-overlay :show="showPrice" :duration="0">
                            <div class="dialog">
                                <img class="price-top" src="../../assets/activity_year/price-top.png" alt="">
                                <div class="dia-title">{{ price.storedMoney }}元红包</div>
                                <div class="dia-text">恭喜您,中奖啦</div>
                                <div class="dia-text">提现步骤</div>
                                <div class="dia-text">将右上角我的记录截图发送给客服
                                </div>
                                <div class="btnBox">
                                    <div class="dia-btn" @click="closeOverlay">立即领取</div>
                                </div>
                            </div>
                        </van-overlay>
                </div>
            </div>
        </div>

</template>

<script>

import { listDrawMain, addActivitySharingRecord } from '../../network/active'
export default {
    name: 'HomeR',
    data() {
        return {
            priceNumd: 0,
            priceNum: 0,
            isShow: false, //遮罩
            showPrice: false, //弹窗
            price: '', //弹窗的title
            showHelp: false, //帮助组队
            helpList: [],
            drawTimes: 3,
            setting: '',
            priceImg: '',
            user_id: localStorage.userId,
            goldenUserDetails: [],
            lotteryList: [],
            myGroup: 0,
            canvas: '',
            ctx: {},
            rotNum: 0,
            priceNumInfo: '',
            pigLotteries: [],
            color: ["#f7dca1", "#f4cd77", "#b5e1e5 ", "#fccd3b", "#f5acba", "#7cc0e1", "#ecc39f", "#f1adac",
                "#000"
            ],
            priceObject: {},
            imgList: ['../../assets/distribution/hongbao.png'
            ],
            activitySharingRecords: [],

            nowRecordId: 0,
            shop_id: localStorage.shopId


        }
    },
    mounted() {
    },
    methods: {
        closeOverlay() {
            this.showPrice = false
            this.$toast('领取成功')
        },

        toHisory() {
            this.$router.push('/history')
        },


        getData: function () {
            listDrawMain({
                shopId: localStorage.shopId,
                userId: localStorage.userId,
                flag: 1
            }).then(res => {
                if (res.flag) {
                    this.activitySharingRecords = res.data.activitySharingRecords.filter(item => {
                        return item.recordFlag == 1 && item.recordChou == 0
                    })
                    this.priceNumd = this.activitySharingRecords.length
                    console.log(this.priceNumd);

                    this.pigLotteries = res.data.storedList
                    this.canvasRun()
                }
            })

        },

        back: function () {
            this.$router.go(-1)
        },
        toGet: function (type) {
            this.nowRecord = this.activitySharingRecords.splice(0, 1)[0]
            console.log(this.nowRecord);


            console.log(this.activitySharingRecords);

            var formData = new FormData();
            formData.append("userId", localStorage.userId);
            formData.append("shopId", localStorage.shopId);
            formData.append("recordId", this.nowRecord.recordId);
            formData.append("recordChou", 1);
            formData.append("recordMoney", type.storedMoney);
            formData.append("chouTime", this.getTime());
            formData.append("flag", 'edut');

            addActivitySharingRecord(formData).then(res => {
                if (res.flag) {
                    this.showPrice = false
                    this.$toast('提交成功，请等待审核')
                    this.showPrice = true;
                } else {
                    this.$toast('提交失败，请重试')
                }
            })

        },
        canvasRun: function () {
            this.canvas = document.getElementById('myCanvas');
            this.ctx = this.canvas.getContext('2d');
            this.ctx.clearRect(0, 0, 110, 110);
            // 屏幕的设备像素比
            var devicePixelRatio = 1;
            // 浏览器在渲染canvas之前存储画布信息的像素比
            var backingStoreRatio = 1;
            // canvas的实际渲染倍率
            var ratio = devicePixelRatio / backingStoreRatio;
            this.canvas.style.width = this.canvas.width;
            this.canvas.style.height = this.canvas.height;
            this.canvas.width = this.canvas.width * ratio;
            this.canvas.height = this.canvas.height * ratio;

            this.createCircle(ratio);
            this.createCirText(ratio);
            //外圆
            // 计算扇形的偏移量，以保证12点钟方向指向扇形区域的中间
        },
        createCirText: function (ratio) {
            var _this = this;
            _this.ctx.textAlign = 'start';
            _this.ctx.textBaseline = 'middle';
            _this.ctx.fillStyle = _this.color[3];
            var step = 2 * Math.PI / _this.pigLotteries.length;
            for (var i = 0; i < _this.pigLotteries.length; i++) {
                (function (arg) {
                    var img = new Image()
                    const Logo = require("../../assets/distribution/hongbao.png");
                    img.src = Logo;
                    img.onload = function () {
                        _this.ctx.save();
                        _this.ctx.scale(ratio, ratio);
                        _this.ctx.beginPath();
                        _this.ctx.translate(120, 120);
                        _this.ctx.font = " 14px Microsoft YaHei";
                        _this.ctx.rotate(arg * step);
                        _this.ctx.textAlign = 'center';
                        _this.ctx.fillStyle = _this.color[8];
                        _this.ctx.fillText(_this.pigLotteries[arg].storedMoney + "元现金红包", 0, -
                            90, 60);
                        _this.ctx.drawImage(img, -14, -80, 30, 30);
                        _this.ctx.closePath();
                        _this.ctx.restore();
                    }
                    // img.src = _this.imgList[0];

                })(i)
            }
        },
        createCircle: function (ratio) {
            var startAngle = 0; //扇形的开始弧度
            var endAngle = 0; //扇形的终止弧度
            var offset = 0;
            // 到12点钟方向的偏移量
            if (this.pigLotteries.length % 2 != 0) {
                offset = Math.PI * 2 / this.pigLotteries.length
            }
            if (this.pigLotteries.length % 2 == 0 && this.pigLotteries.length / 2 & 2 != 0) {
                offset = 0;
            }
            //画一个8等份扇形组成的圆形
            for (var i = 0; i < this.pigLotteries.length; i++) {
                if (this.pigLotteries.length == 6 || this.pigLotteries.length == 3) {
                    startAngle = (Math.PI * 2 * i / this.pigLotteries.length) - (Math.PI / this
                        .pigLotteries.length) - 56;
                } else if (this.pigLotteries.length == 4 || this.pigLotteries.length == 8) {
                    startAngle = (Math.PI * 2 * i / this.pigLotteries.length) - (Math.PI / this
                        .pigLotteries.length)
                } else if (this.pigLotteries.length == 5) {
                    startAngle = (Math.PI * 2 * i / this.pigLotteries.length) - (Math.PI / this
                        .pigLotteries.length) + 48.68
                } else {
                    startAngle = (Math.PI * 2 * i / this.pigLotteries.length) - (Math.PI / this
                        .pigLotteries.length)
                }
                endAngle = startAngle + Math.PI * 2 / this.pigLotteries.length;
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.arc(120 * ratio, 120 * ratio, 120, startAngle, endAngle, false);
                this.ctx.lineWidth = 220;
                this.ctx.strokeStyle = this.color[i];
                this.ctx.stroke();
                this.ctx.restore();
            }
        },
        start: function () {
            var _this = this;
            if (_this.priceNumd > 0) {
                // _this.isShow = true;
                //可抽奖次数减一
                _this.priceNumd--;
                //转盘旋转
                var num = parseInt(Math.random() * _this.pigLotteries.length);
                var luck_num = num == 0 ? 0 : Math.abs(num - _this.pigLotteries.length);
                _this.priceObject = _this.pigLotteries[luck_num];
                _this.priceImg = _this.imgList[0];
                var angles = 2160 * _this.rotNum + (1800 + (360 / _this.pigLotteries.length * num));
                var degValue = 'rotate(' + angles + 'deg' + ')';



                var d = document.getElementById('myCanvas')

                console.log(d);

                d.style.setProperty('transform', degValue)
                d.style.setProperty('-o-transform', degValue)
                d.style.setProperty('-ms-transform', degValue)
                d.style.setProperty('-moz-transform', degValue)
                d.style.setProperty('-webkit-transform', degValue)

                //转盘旋转过程“开始抽奖”按钮无法点击
                //旋转次数加一
                _this.rotNum = _this.rotNum + 1;
                //“开始抽奖”按钮无法点击恢复点击
                var timeNum = 0;
                var timer = setInterval(function () {
                    timeNum++;
                    if (timeNum == 6) {

                        _this.price = _this.priceObject;
                        _this.toGet(_this.priceObject)
                        clearInterval(timer);
                        _this.isShow = false;
                    }
                }, 1000);
                // }
            } else {
                _this.$toast('今天没机会了,请明天再来')
            }
        },


        getTime() {
            var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
            var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
            return beijingTime

        },





    },
    created() {
        this.getData();

    },
    //计算属性
    computed: {

    },
    filters: {
        names: function (value) {
            if (value) {
                var chart = value.split('');
                if (chart.length > 2) {
                    var text = chart[0] + chart[1] + "*"
                } else if (chart.length <= 2) {
                    var text = chart[0] + "**"
                }
                return text;
            }
        },
    }

}

</script>

<style lang='less' scoped>
.backBtn {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.backIcon {
    font-size: 39.9975px;
    width: 36px;
    height: 36px;
}

.searchBox {
    position: fixed;
    top: 0;
    margin: 0 auto;
    padding-top: 63.9975px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 .9975px 6px #ccc;
}

.navTit {
    position: relative;
    left: 40px;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchBox>div:last-child {
    margin-right: 30px;
    font-size: 28px;
}

body,
.mainConBox {
    background-color: #632fb5;
    font-size: 14px;
    color: #333;
}

.content {
    padding-top: 90px;
    height: calc(100vh - 90px);
}

.top-title {
    height: 140px;
    position: absolute;
    width: 616px;
    left: 50%;
    margin-left: -308px;
    top: 72px;
    z-index: 10;
}

.top-bg {
    position: relative;
    width: 100%;
    display: block;
    height: 1232px;
}

.doing {
    position: relative;
}

.top-text {
    width: 400px;
    position: absolute;
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    z-index: 10;
    top: 260px;
    left: 50%;
    margin-left: -200px;
    background-image: url(../../assets/activity_year/top-text.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.van-nav-bar__text {
    color: #333;
}

.round {
    position: absolute;
    width: 720px;
    height: 780px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    margin-left: -360px;
    top: 296px;
    background-image: url(../../assets/activity_year/round.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.group {
    position: absolute;
    right: 28px;
    top: 920px;
    width: 176px;
    height: 176px;
    background: linear-gradient(0deg, #E33FC7, #984FEF);
    border: 4px solid #F6D1A8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 24px;
    text-align: center;
}

.active {
    background: #632FB5;
    position: relative;
    padding: 0 48px 32px 48px;
    color: #fff;
}

.active-say {
    width: 320px;
    left: 50%;
    margin-left: -160px;
    position: relative;
    margin-bottom: 36px;
}

.border {
    position: relative;
    padding: 40px;
    border-radius: 16px;
    max-height: 600px;
    overflow-y: scroll;
    box-shadow: rgba(255, 221, 239, 0.38) -5px -4px 15px 0px inset, rgba(78, 253, 228, 0.4) 3px 3px 15px 0px inset;
}

.title-btm {
    font-size: 32px;
    line-height: 32px;
}

.card>div:nth-child(1) {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 16px;
    box-sizing: border-box;
    border: 2px solid #fff;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card>div:nth-child(2) {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 12px;
}

.card>div:nth-child(3) {
    font-size: 24px;
    line-height: 24px;
}

.card {
    position: relative;
    padding-left: 164px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 24px;
}

.card img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.active-address,
.active-time {
    font-size: 24px;
    line-height: 24px;
    padding-top: 24px;
}

.active-time {
    margin-bottom: 48px;
}

.mb120px {
    margin-bottom: 40px;
}

.mt8px {
    margin-top: 40px;
}

.join {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 1080px;
    font-size: 24px;
    color: #fff;
}

.price {
    position: relative;
    height: 480px;
    width: 480px;
    border-radius: 50%;
    margin-bottom: 36px;
}

.pointer {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    z-index: 99;
    top: 50%;
    margin-top: -108px;
}

.turnplate_box {
    border-radius: 50%;
    overflow: hidden;
    padding-right: 4px;
    max-width: 440px;
    max-height: 440px;
    position: relative;
    right: 0px;
    bottom: 20px;
    box-sizing: border-box;
}

#myCanvas {
    border-radius: 50%;
    overflow: hidden;
}

.goto {
    z-index: 99;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    width: 160px;
}

#myCanvas {
    -o-transform: transform 6s;
    -ms-transform: transform 6s;
    -moz-transform: transform 6s;
    -webkit-transform: transform 6s;
    transition: transform 6s;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.item {
    background: transparent;
    position: relative;
}

#myCanvas {
    width: 440px !important;
    height: 440px !important;
    position: relative;
}

.van-overlay {
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog {
    width: 576px;
    background: #F8E3E6;
    position: relative;
    border-radius: 20px;
    padding-bottom: 56px;
}

.price-top {
    width: 640px;
    position: absolute;
    left: 50%;
    margin-left: -320px;
    top: -140px;

}

.dia-title {
    font-size: 60px;
    font-weight: bold;
    color: #D9374E;
    text-align: center;
    padding-top: 80px;
}

.dia-text {
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 24px;
    padding-top: 16px;
    text-align: center;
    color: #7C595E;
}

.dia-noprice {
    position: relative;
    margin-top: 44px;
    width: 320px;
    left: 50%;
    margin-left: -160px;
    margin-bottom: 56px;
}

.btnBox {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 576px;
}

.btnBox>div {
    margin-top: 40px;
    width: 410px;
    height: 98px;
    line-height: 98px;
    background: linear-gradient(0deg, #FE6566, #F72268);
    border-radius: 50px;
    font-size: 34px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
}

.btnBox>div:first-child {
    width: 410px;
    height: 98px;
    background: linear-gradient(0deg, #5C24B3, #8750DD);
    border-radius: 50px;
}

/* .dia-btn {
	width: 138px;
	height: 44px;
	background: linear-gradient(0deg, #F71A69, #FE6965);
	color: #fff;
	text-align: center;
	border-radius: 22px;
} */

.dia-price {
    width: 320px;
    height: 320px;
    background-color: #fff;
    left: 50%;
    position: relative;
    margin: 40px 0 32px -160px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dia-price img {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 16px;
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;

}

.loading img {
    width: 100px;
    border-radius: 50%;
}

.help {
    width: 580px;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    border-radius: 16px;
    padding-bottom: 60px;
}

.help-title {
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 36px;
}

.help-box {
    position: relative;
    display: flex;
    padding: 0 40px;
    margin-bottom: 52px;
    justify-content: space-between;
}

.help-box>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #666;
}

.help-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: #F0DBC9;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    margin-bottom: 8px;
}

.help-img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 8;
    height: 100%;
    display: block;
    background-color: #F0DBC9;
}

.help-img div {
    z-index: 4;
    position: relative;
}

.help-num {
    color: #666;
    font-size: 28px;
    line-height: 28px;
    text-align: center;
}

.help-num span {
    color: #ff3b14;
}

.help-btn,
.help-option {
    width: 360px;
    height: 88px;
    line-height: 88px;
    color: #fff;
    text-align: center;
    border-radius: 44px;
    position: relative;
    left: 50%;
    margin-left: -180px;
    margin-top: 16px;
    margin-bottom: 24px;
    background: linear-gradient(0deg, #F71A69, #FE6965);
}

.help-option {
    opacity: 0.5;
}

.font12 {
    font-size: 24px;
    line-height: 24px;
}

.cross {
    position: absolute;
    right: 20px;
    top: 20px;
}

.row-new {
    display: flex;
    justify-content: space-between;
}

.active-title {
    position: absolute;
    top: -80px;
    width: 100%;
    text-align: center;
    left: 0;
    font-size: 32px;
    font-weight: bold;
}

.row-new>div {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 44px;
}

.row-new>div:nth-child(2) {
    text-align: center;
}

.row-new>div:nth-child(3) {
    text-align: right;
}

.none {
    display: flex;
    text-align: center;
}

body {
    background-color: #632fb5;
}

.upimgBox {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    margin: 40px;
    width: 500px;
    /* height: 250px; */
    border: 2px dashed #A77CEB;
}

.van-image {
    width: 136px;
    height: 136px;
}

.van-uploader {
    position: relative !important;
    width: 500px;
    /* height: 250px; */
}

.uplader {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 140px;
    height: 140px;
    font-size: 28px;
    color: #A77CEB;
}

.uplader>.van-icon {
    font-size: 96px !important;
}

.firstUplader {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 460px;
    font-size: 28px;
    color: #A77CEB;

}

.firstUplader>.van-icon {
    font-size: 96px !important;
}


.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>